<template>
  <div class="app-container">
    <git-navigation />
    <el-col :span="22" :offset="1">
      <strong>{{ slug }}</strong>  · 创建页面
      <el-divider />
    </el-col>
    <el-col :span="22" :offset="1">
      <el-form ref="form" label-position="top" :rules="rules" :model="form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!--          <markdown-editor ref="markdownEditor" v-model="form.content" height="300px" />-->
          <template>
            <div>
              <mavon-editor
                ref="md"
                v-model="form.content"
                style="min-height: 600px"
                @change="change"
              />
            </div>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="create">创建</el-button>
          <el-button @click="$router.go(-1)">返回</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>

<script>
    import GitNavigation from './components/GitNavigation'
    import { postData } from '@/api/requestData'
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'

    export default {
        components: {
            GitNavigation,
            mavonEditor
        },
        filters: {},
        data() {
          return {
              pid: this.$route.params.pid,
              slug: this.$route.query.slug,
              form: {
                  title: this.$route.query.slug,
                  content: ''
              },
              html: '',
              rules: {
                  title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
                  content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
              }
          }
        },
        created() {

        },
        methods: {
            create() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        const params = this.form
                        postData('/git/create/wiki/' + this.pid, params).then((response) => {
                            this.$message.success(response.message)
                        }).catch(() => {})
                    }
                })
            },
            change(value, render) {
                // render 为 markdown 解析后的结果[html]
                this.html = render
            }
        }
    }
</script>

<style scoped>

</style>
